<template>
  <div class="operation-logs">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键字：">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入搜索内容"
            clearable
            size="small"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择日期：">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            size="small"
            style="width: 380px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleSearch"
          >查询</el-button>
          <el-button
            icon="el-icon-refresh"
            size="small"
            @click="handleReset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 日志表格 -->
    <el-table
      :data="filteredLogs"
      style="width: 100%"
      v-loading="loading"
      border
    >
      <el-table-column prop="ip" label="IP地址" width="180">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false">{{ scope.row.ip }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="operationTime" label="操作时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.operationTime }}
        </template>
      </el-table-column>
      <el-table-column prop="eventType" label="事件类型" width="150">
        <template slot-scope="scope">
          <el-tag
            :type="getEventType(scope.row.eventType)"
            size="small"
            effect="plain"
          >
            {{ scope.row.eventType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="日志" min-width="300">
        <template slot-scope="scope">
          <span class="log-description">{{ scope.row.description }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OperationLogs',
  data() {
    return {
      searchForm: {
        keyword: '',
        dateRange: []
      },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      logs: [
        {
          ip: '121.89.206.20',
          operationTime: '2024-04-23 17:25:52',
          eventType: '资源',
          description: '执行_控制重置'
        },
        {
          ip: '121.89.206.20',
          operationTime: '2024-04-23 13:16:23',
          eventType: '资源',
          description: '执行_控制重置'
        },
        {
          ip: '121.89.206.20',
          operationTime: '2024-04-23 13:15:38',
          eventType: '资源',
          description: '执行_控制重置'
        }
      ]
    }
  },
  computed: {
    filteredLogs() {
      let result = [...this.logs]

      // 关键字搜索
      if (this.searchForm.keyword) {
        const keyword = this.searchForm.keyword.toLowerCase()
        result = result.filter(log =>
          log.ip.toLowerCase().includes(keyword) ||
          log.description.toLowerCase().includes(keyword) ||
          log.eventType.toLowerCase().includes(keyword)
        )
      }

      // 日期范围筛选
      if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
        const [start, end] = this.searchForm.dateRange
        result = result.filter(log => {
          const operationTime = new Date(log.operationTime)
          return operationTime >= start && operationTime <= end
        })
      }

      this.total = result.length
      return result
    }
  },
  methods: {
    handleSearch() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.$message({
          type: 'success',
          message: '搜索完成'
        })
      }, 500)
    },
    handleReset() {
      this.searchForm = {
        keyword: '',
        dateRange: []
      }
      this.currentPage = 1
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    getEventType(type) {
      const types = {
        '资源': 'primary',
        '系统': 'success',
        '安全': 'warning',
        '错误': 'danger'
      }
      return types[type] || 'info'
    }
  }
}
</script>

<style scoped>
.operation-logs {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.log-description {
  color: #606266;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  .operation-logs {
    padding: 10px;
  }

  .search-bar {
    padding: 15px;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .el-input, .el-date-picker {
    width: 100% !important;
  }

  .el-form-item__content {
    width: 100%;
  }

  .el-button {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 5px;
  }
}
</style>
